<template>
  <div id="chart">
    <div class="sub-title">{{ $t('wuLiuFaHuoJiShiShuai') }}</div>
    <!-- <dv-charts :option="option" /> -->
    <echarts-new
      class="charts-container"
      :option-data="option"
      :styles="style"
      height="100%"
      width="100%"
      v-if="option"
    ></echarts-new>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import echartsNew from '@/components/echartsNew/index';
export default {
  name: 'rbChart',
  components: {
    echartsNew,
  },
  data() {
    return {
      style: { height: '100%' },
      option: {
        color: ['#33CCCC', '#7299BF', '#BFEAFF', '#DBB36E'],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'center',
          itemGap: 20,
          textStyle: {
            color: '#fff',
          },
          formatter: (name) => {
            // 获取legend显示内容
            let data = this.option.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let p = ((tarValue / total) * 100).toFixed(2);
            return name + ' ' + ' ' + p + '%';
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['25%', '50%'],
            insideLabel: {
              show: true,
            },
            data: [
              { value: 1048, name: 'UPS' },
              { value: 735, name: 'FedEx' },
              { value: 580, name: 'DHL' },
              { value: 484, name: 'TNT' },
              { value: 300, name: 'EMS' },
            ],
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .charts-container {
    height: calc(100% - 50px);
  }
}
</style>
